<!DOCTYPE html>
<html>
<head>
	<title>employee.html</title>
	<meta charset="UTF-8"/>
	<!--  VUE -->
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	<!-- elementUI -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	<!-- axios -->
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>

<div id="app">
	<!-- 工具条  -->
	<div>
		<el-button type="primary" icon="el-icon-plus" @click="showDialog" circle></el-button>
		<el-button type="danger" icon="el-icon-delete" @click="deleteEmp" circle></el-button>
		姓名:
		<el-input v-model="empQuery.name" placeholder="请输入内容" clearable style="width:200px"></el-input>
		入职时间:
		<el-date-picker v-model="empQuery.beginDate" type="date" placeholder="选择开始日期"></el-date-picker>
		-------
		<el-date-picker type="date" v-model="empQuery.endDate" placeholder="选择结束日期"></el-date-picker>
		<el-button icon="el-icon-search" @click="empSearch" circle></el-button>
	</div>

	<el-table :data="tableData" @selection-change="handleSelectionChange" stripe style="width: 100%">
		<el-table-column type="index"></el-table-column>
		<el-table-column type="selection" width="55"></el-table-column>
		<el-table-column prop="id" label="员工编号" width="180"></el-table-column>
		<el-table-column prop="name" label="姓名" width="180"></el-table-column>
		<el-table-column prop="telephone" label="手机号" width="180"></el-table-column>
		<el-table-column prop="hiredate" label="入职时间" width="180"></el-table-column>
		<el-table-column prop="dname" label="部门"></el-table-column>
		<el-table-column prop="rname" label="角色"></el-table-column>
		<el-table-column prop="state" label="状态" :formatter="stateFormatter"></el-table-column>
		<el-table-column label="操作">
			<template slot-scope="scope">
				<el-button size="mini" type="success" @click="handleEdit(scope.row)">编辑</el-button>
			</template>
		</el-table-column>

	</el-table>
	<!-- 分页条  -->
	<div>
		<el-pagination @size-change="handleSizeChange" :current-page="empQuery.page"
					   @current-change="handleCurrentChange"
					   :page-sizes="[3, 6, 9, 12]" :page-size="100" layout="total, sizes, prev, pager, next, jumper"
					   :total="empTotal">
		</el-pagination>
	</div>


	<!-- 弹框 -->
	<el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
		<el-form status-icon :model="empInfo" ref="loginFrom" label-width="100px" class="demo-ruleForm">
			<el-input type="hidden" v-model="empInfo.id" autocomplete="off"></el-input>
			<el-form-item label="姓名" prop="name">
				<el-input type="text" v-model="empInfo.employeeName" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="手机号" prop="telephone">
				<el-input type="text" v-model="empInfo.employeeTelephone" autocomplete="off"></el-input>
			</el-form-item>

			<el-form-item label="部门" prop="deptID">
				<el-select v-model="empInfo.departmentId" placeholder="请选择">
					<el-option v-for="dept in deptArr" :key="dept.id" :label="dept.name" :value="dept.id">
					</el-option>
				</el-select>
			</el-form-item>

			<el-form-item label="角色" prop="roleID">
				<el-select v-model="empInfo.employeeRoleId" placeholder="请选择">
					<el-option v-for="role in roleArr" :key="role.id" :label="role.name" :value="role.id">
					</el-option>
				</el-select>
			</el-form-item>

			<el-form-item label="状态" prop="state">
				<el-select v-model="empInfo.employeeState" placeholder="请选择">
					<el-option :key="1" label="在职" :value="1">
					</el-option>
					<el-option :key="0" label="离职" :value="0">
					</el-option>
				</el-select>
			</el-form-item>

		</el-form>


		<span slot="footer" class="dialog-footer">
					<el-button @click="dialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="changeEmp">确 定</el-button>
				</span>
	</el-dialog>


</div>


<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            tableData: [],
            empQuery: {
                page: 1,
                count: 3,
                name: "",
                beginDate: "",
                endDate: ""
            },
            empTotal: 0,
            dialogVisible: false,
            empInfo: {},
            deptArr: [],
            roleArr: [],
            deleteArr: []
        },
        methods: {
            stateFormatter: function (row, column, cellValue, index) {
                return cellValue == 1 ? "在职" : "离职";
            },
            handleSizeChange: function (val) {
                this.empQuery.count = val;
                this.empQuery.page = 1;
                reload();
            },
            handleCurrentChange: function (val) {
                this.empQuery.page = val;
                reload();
            },
            empSearch: function () {
                reload();
            },
            showDialog: function () {
                this.dialogVisible = true;
                this.empInfo = {};
            },
            changeEmp: function () {
                var url = "";

                if (this.empInfo.id == null) {
                    url = 'emp/addEmp';
                } else {
                    url = "emp/editEmp";
                    app.empInfo.employeeHiredate=null;

                    console.log('nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn')
					console.log(app.empInfo)
                    console.log('nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn')
                }

                axios.post(url, app.empInfo)
                    .then(function (response) {
                        app.dialogVisible = false;
                        app.$message({
                            message: response.data.msg,
                            type: 'success'
                        });
                        reload();
                    });

            },
            handleEdit: function (emp) {
                axios.get('emp/getEditEmp?id=' + emp.id)
                    .then(function (response) {
                        app.empInfo = response.data;
                        app.dialogVisible = true;
                    });

            },
            deleteEmp: function () {

                if (app.deleteArr.length > 0) {
                    this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(function () {
                        var ids = [];
                        for (var index in app.deleteArr) {
                            ids.push(app.deleteArr[index].id);
                        }
                        axios.post('emp/deleteEmp', ids)
                            .then(function (response) {
                                app.empQuery.page = 1;
                                reload();
                            });
                    });
                } else {
                    app.$message.error('请至少选中一行');
                }

            },
            handleSelectionChange: function (val) {
                this.deleteArr = val;
            }
        }
    });


    function reload() {
        axios.post('emp/getEmp', app.empQuery)
            .then(function (response) {
                app.tableData = response.data.empData;
                app.empTotal = response.data.empTotal;
            });
    }

    reload();

    axios.get('emp/getDeptAndRole')
        .then(function (response) {
            app.deptArr = response.data.dept;
            app.roleArr = response.data.role;
        });
</script>
</body>
</html>
